
  <!-- LOADER CONTAINER -->
  <div id="main-container-loader">
    <span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span><h4>Loading queues Appp</h4>
  </div>

  <!-- QUEUE CONTAINER -->
  <div id="queue-container" class="small-12 columns">
    <div class="row heading clearfix">
        <div class="small-12 title-heading">
          <h1 class="bold">{{astroboxName}} · Print Queue </h1>
        </div>
      </div>
      {% if (user_email) %}
      <div class="printqueue-menu row clearfix">
          <!--div class="page-heading">
            <h1 class="bold">
              <span id="tabHeader">Print Queue</span>
              <span class="first-loading"><i class="icon-rocket-spinner animate-spin"></i></span>
            </h1>
          </div-->

          <!--  Side menu -->
          <div id="user-side-menu-container">
            <div class="icon-bar vertical three-up data-tab tab">
              <a class="item" title="Print Queues" data-tab="printQueues" >
                <i class="icon-inbox" id="printQueues-icon"></i>
                <label class="bold">Print Queues</label>
              </a>
              <a class="item" title="Print Later" data-tab="printLater" >
                <i data-badge="0" class="icon-bookmark" id="printLater-icon" ></i>
                <label class="bold">Print Later</label>
              </a>
            </div>
          </div>

          <!-- Main Box container -->
          <div id="app-container queues-container">
            <div id="user-menu-content">
              <!-- @BOX CONTAINER -->
              <div class="clearfix box-container loading-status filter-ready" id="box-container">
                <!-- BOX ROW -->
                <div class="row clearfix main-buttons text-center">
                    <!-- cancel print button -->
                  <div class="cancel-button loading-button small-12 columns">
                    <button class="secondary small radius cancel-label bold expand">Cancel</button>
                  </div>


                </div>

                <!-- SHOW SELECTION -->
                <div class="shownByContainer clearfix">
                    <button class="pending-tab small-6 large-2 large-offset-4 columns is-active">
                      <span class=" bold">Pending (<span class= "ready-counter-label" ></span>) </span>
                    </button>
                  <button class="completed-tab small-6 large-2 end columns success">
                    <span class=" bold">Completed (<span class= "finished-counter-label" ></span>) </span>
                  </button>

                  <!-- clear pending button -->
                  <div class="columns small-12 clear-label text-right">
                    <a class="clear-pending-button secondary small expand bold">Clear All</a>
                  </div>

                    <!-- clear finished button -->
                  <div class="columns small-12 clear-label text-right">
                    <a class="clear-finished-button secondary small expand bold">Clear All</a>
                  </div>
                </div>

                <!-- No ready files message -->
                <div class="no-ready-files-container row">
                  <div class="small-12 columns">
                    <h4><b>Whoops!</b></h4>
                    <p>There are no Print Files in the queue</p>
                    <img class="no-files" src="/img/no-files-queue.svg" alt="No designs"/>
                  </div>
                </div>

                <!-- No finished files message -->
                <div class="no-finished-files-container row">
                <div class="small-12 columns">
                  <h4><b>Whoops!</b></h4>
                  <p>There are no Finished Files yet</p>
                  <img class="no-files" src="/img/no-finished-files-queue.svg" alt="No designs"/>
                </div>
                </div>
                <div class="pending-files-box animated fadeIn columns"></div>
                <div class="finished-files-box animated fadeIn columns"></div>
              </div>

              <!-- @PRINTLATER-LIST CONTAINER -->
              <div class="print-later-list small-12 columns" id="print-later-list">
                <div class="container"></div>
                <div id="no-printFiles" class="columns text-center" style="display:none">
                  <img class="no-files" src="/img/no-finished-files-queue.svg" alt="No designs"/>
                  There are no Print Files. Go to Files and click on <b>Print Later</b> to add some.
                </div>
              </div>
            </div>
          </div>

        </div>
      {% else %}
        <div id="login-required-message">You need to be logged in to access to the Print Queue app.</div>
      {% endif %}
  </div>

<!-- PRINTFILE ROW -->
<script type="text/template" id="print-file-row-template">
  <% if (!view.parent.printLaterFiles) { %>
  <div class="columns small-3 medium-1 large-1 text-right">
    <span class="index-queue"><%= pf.queue_index %></span>
    <i class="icon-step-backward moving-arrow"  title="Move to top"></i>
    <i class="icon-angle-left moving-arrow"  title="Up"></i>
    <i class="icon-angle-right moving-arrow" title="Down"></i>
  </div>
  <% } %>

  <div class="columns small-3 medium-1 large-1 right text-right show-for-small-only delete-file">
    <a href="#" class="delete-printFile padding-right" title="Discard"><span class="discard-button">&#10540;</span></a>
  </div>

  <div class="columns small-12 medium-10 large-6 border-right time-container">

    <div class="row clearfix">
      <div class="columns small-4 medium-3 large-2 no-padding-r">
        <% if (pf.design_image) { %>
        <img class="rendered_image left" src="<%= pf.design_image %>"/>
        <% } else { %>
        <img class="rendered_image no-image left" src="/img/noimage.svg"/>
        <% } %>
      </div>

      <div class="columns small-8 medium-9 large-10">
        <small>
          <span class="last-status">
            <span class="message-printing" >Started printing</span>
            <span class="message-canceled" ><i class="icon-cancel-circled"></i>Canceled</span>
            <span class="message-failed" ><i class="icon-attention"></i>Failed</span>
            <span class="message-finished" ><i class="icon-ok-circled"></i>finished</span>
            <% if (pf.last_status_time) { %>
            <span class="time-status" data-localtime-format="d MMM, yyyy (h:mm a)" ><%= new Date(pf.last_status_time+' UTC').toISOString() %></span>
            <% } %>
          </span>
        </small>

        <%= pf.name %>
        <div class="printer-info" > <%= pf.printer.name ? pf.printer.name : "__" %> / <%= pf.filament_name ? pf.filament_name : "__" %> / <%= pf.quality ? pf.quality : "__" %> </div>
        <% if (pf.info) { var print_time = view._formatTime(pf.info.print_time)  } %>

        <% if (view.parent.printLaterFiles) { %>
        <div class="date-added" >
          <small><i class="icon-calendar"></i>Added
            <span class="time-status" data-localtime-format="d MMM, yyyy (h:mm a)"><%= new Date(pf.created+' UTC').toISOString() %></span>
          </small>
        </div>
        <% } %>
        <div class="tags clearfix">
          <div class="flex-container">
          <% for(var i = 0; i < pf.tag_list.length; i++) { %>
            <span class="edit-tag tag" data-id="<%= pf.tag_list[i].id %>" data-name="<%= pf.tag_list[i].name %>" data-color="<%= pf.tag_list[i].color %>" style="background-color:<%= pf.tag_list[i].color %>; color:<%= pf.tag_list[i].text_color %>;" ><%= pf.tag_list[i].name %></span>
          <% } %>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="columns small-offset-2 small-9 medium-offset-1 medium-4 large-offset-0 large-3 text-center">
    <div class="row clearfix">

      <div class="printer-time columns small-9">
        <span class="printTime-label bold">
          <i class="icon-clock"></i>
          <span class="hour"><%= print_time ? print_time[0]:"__"%></span>:<span class="min" ><%= print_time ? print_time[1]:"__"%></span>:<span class="sec" ><%= print_time ? print_time[2]:"__"%></span>
        </span>
      </div>

      <div class="notes columns small-3 right">
        <span class="open-notes text-left">
          <% if (pf.notes) { %>
          <span data-tooltip aria-haspopup="true" title="<%=pf.notes%>">
            <i class="icon-doc-text"></i>
          </span>
          <% } %>
        </span>


      </div>
    </div>
  </div>

  <% if (view.parent.printLaterFiles) { %>
  <div class="columns small-offset-4 small-7 medium-offset-1 medium-4 large-offset-0 large-2 xlarge-1  text-center print-actions loading-button split">
    <button class="success radius tiny bold expand print button split"><b>Print Now</b><span class="arrow-drop"  data-dropdown="drop-<%=pf.id%>"></span></button>
    <span class="success button radius tiny bold loading disabled"><i class="icon-rocket-spinner animate-spin"></i></span>
    <br>
    <ul id="drop-<%=pf.id%>" class="f-dropdown" data-dropdown-content><li><a class="queue">Add to Queue</a></li></ul>
  </div>

  <div class="columns medium-offset-1 medium-4 large-offset-0 large-2 text-center print-actions single-queue-button">
    <a class="success radius tiny bold expand queue button"><b>Add to Queue</b></a>
  </div>
  <% } %>
  <% if (pf.queue_index == 1) { %>

      <!-- print button -->
      <div class="print-button inactive loading-button small-11 medium-3 large-2 columns">
        <button class="success tiny radius print-next bold expand button">Print</button>
        <span class="success button tiny radius bold disabled loading expand"><i class="icon-rocket-spinner animate-spin"></i></span>
      </div>

      <!-- connect printer -->
      <div class="connect-printer-button loading-button  small-10 columns">
        <button class="alert button disabled tiny radius connect-label bold expand">Printer Disconnected</button>
        <span class="warning button radius radius bold loading expand"><i class="icon-rocket-spinner animate-spin"></i>Connecting</span>
        <span class="alert button radius radius bold inactive disabled failed expand"><i class="icon-attention"></i>Failed to connect</span>
      </div>

  <% } %>

  <div class="columns small-3 medium-1 large-1 right text-right hide-for-small-only">
    <a href="#" class="delete-printFile padding-right" title="Discard"><span class="discard-button">&#10540;</span></a>
  </div>

  <div class="columns small-12 medium-4 large-3 text-center">

    <div class="return-label" title="Return to Queue" style="display:none;">
        <div class="secondary bold tiny button return-button">
          <span class="status">Return to Queue</span>
        </div>
    </div>
  </div>
  <div class="clearfix"></div>
</script>

<!-- @DELETE QUEUE ELEMENT -->
<div id="delete-queue-element-dlg" class="reveal-modal medium" data-reveal>
  <h2 class="bold">Remove Print File from Queue</h2>
  <div class="reveal-content"><p>Are you sure you want to remove <b>from the queue</b> the Print File  <span class="bold filename"></span>?</p>
    <div class="button-container row collapse">
      <div class="columns medium-5 small-12">
        <button class="radius secondary cancel">Cancel</button>
      </div>
      <div class="columns medium-7 small-12 loading-button confirm-button text-right">
        <button class="alert radius">Remove From Queue</button>
        <span class="loading button disabled alert radius"><i class="icon-rocket-spinner animate-spin"></i>Removing From Queue...</span>
        <span class="failed button disabled alert radius"><i class="icon-attention"></i> Failed</span>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

<!--  @CLEAR FINISHED QUEUE -->
<div id="clear-finished-dlg" class="reveal-modal medium" data-reveal>
  <h2 class="bold">Clear <span class="bold status-label"></span> files</h2>
  <div class="reveal-content">
    <p>Are you sure you want to remove all the <span class="bold status-label"></span> files?</p>
      <div class="button-container">
      <button class="radius secondary left cancel">Cancel</button>
      <div class="loading-button right confirm-button">
        <button class="alert radius">Clear</button>
        <span class="loading button disabled alert radius"><i class="icon-rocket-spinner animate-spin"></i>Clearing files...</span>
        <span class="failed button disabled alert radius"><i class="icon-attention"></i> Failed</span>
      </div>
      <div class="clearfix"></div>
      </div>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

<!-- @PRINT QUEUE ELEMENT-->
<div id="print-element-dlg" class="reveal-modal medium" data-reveal data-options="close_on_background_click:false">
  <h2 class="bold"><i class="icon-rocket"></i>Downloading file...</h2>
    <div class="reveal-content text-center">
      <span class="progress-container loading">
        <div class="progress-label bold text-right">20%</div>
        <div class="progress success">
          <span class="meter" style="width:50%" ></span>
        </div>
      </span>
      <a href="#" class="button alert radius small cancel">Cancel</a>
    </div>
</div>

